customElements.define(
    'wcs-btn',
    class ButtonElement extends HTMLElement {
        constructor() {
            super();
           
        }
        connectedCallback() {
            this.update(); // 调用 update 方法来应用参数
        }
        // 更新内容的方法
        async update() {
            const name = this.getAttribute('name') || 'World';
            const template = await this.getTemplate(name);
            // 创建 Shadow DOM
            const shadow = this.attachShadow({ mode: 'open' });
            // 克隆模板内容并添加到 Shadow DOM
            const templateContent = template.cloneNode(true);
            shadow.appendChild(templateContent);
            shadow.getElementById('name').innerHTML = name;
            const button = shadow.querySelector('button'); // 获取内部的button元素
            button.addEventListener('click', () => {
                alert('Button clicked!'); // 添加点击事件处理函数
            });
        }
        getTemplate() {
           const template = fetch('/components/button/default/index.html')
            .then(response => response.text())
            .then(data => {
                const parser = new DOMParser();
                const doc = parser.parseFromString(data, 'text/html');
                const template = doc.getElementById('wcs-btn').content;
                return template;
            });
            return template;
        }

    }
);
